<template>
  <div class="app-main-container">
    <div class="app-main-title">
      分配权限
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> 返回上一页
      </div>
    </div>
    <div class="permission-table">
      <div class="thead">
        <div class="tr">
          <div class="td first-menu">一级菜单</div>
          <div class="td second-menu">二级菜单</div>
          <div class="td options">权限分配</div>
        </div>
      </div>
      <div class="tbody">
        <el-checkbox-group v-model="checkedMenuList">
          <div v-for="(item, index) in allRoleMenu" :key="index" class="tr">
            <div class="td first-menu">
              <el-checkbox
                class="checkbox"
                :label="item.id"
                @change="checkboxChange($event, item.id, item)"
              >{{ item.name }}</el-checkbox>
            </div>
            <div v-if="item.menuType == '0'" class="second-menu-options">
              <div v-for="(ite, idx) in item.children" :key="idx" class="item">
                <div class="td second-menu">
                  <el-checkbox
                    class="checkbox"
                    :label="ite.id"
                    @change="checkboxChange($event, ite.id, ite)"
                  >{{ ite.name }}</el-checkbox>
                </div>
                <div class="td options">
                  <el-checkbox
                    v-for="(ite_, idx_) in ite.children"
                    :key="idx_"
                    :label="ite_.id"
                    class="checkbox"
                    @change="checkboxChange($event, ite_.id)"
                  >{{ ite_.name }}</el-checkbox>
                </div>
              </div>
            </div>
            <div v-if="item.menuType == '1'" class="second-menu-options">
              <div class="item">
                <div class="td second-menu">-</div>
                <div class="td options">
                  <el-checkbox
                    v-for="(ite_, idx_) in item.children"
                    :key="idx_"
                    class="checkbox"
                    @change="checkboxChange($event, ite_.id)"
                  >{{ ite_.name }}</el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <div class="flex-cc">
      <el-button
        v-preventReClick
        type="primary"
        size="default"
        @click="submit"
      >提交</el-button>
    </div>
  </div>
</template>

<script>
import { roleBindListPost, initroleMenus, roleBindPost } from '@/api'
export default {
  name: 'RoleBind',
  data() {
    return {
      tabs: [
        { id: '0', label: '商户管理端' }
      ],
      activeTab: '0',
      activeBindRoleMenuTab: 'firstBindRoleMenuTab',
      allRoleMenu: [],
      activeRoleId: '',
      checkedMenuList: []
    }
  },
  created() {
    this.activeRoleId = this.$route.query.roleId
    this.getRoleMenuList(this.$route.query.roleId)
  },
  methods: {
    // 获取菜单
    getRoleMenuList() {
      const { activeRoleId } = this
      // 获取商户角色菜单
      roleBindListPost({ param: { roleId: activeRoleId }}).then(res => {
        this.checkedMenuList = res.recordList
        // 获取商户菜单
        initroleMenus({ param: {}}).then(res => {
          this.allRoleMenu = res.recordList
          console.log(111, this.allRoleMenu)
        })
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    // 切换商户 / 场馆
    handleClick() {
      this.getRoleMenuList()
    },
    // CheckBox点击
    checkboxChange(type, id, item) {
      const checkedMenuList = this.checkedMenuList
      if (type) {
        this.checkedMenuList.push(id)
        if (item && item.children) {
          item.children.forEach(e => {
            if (!checkedMenuList.includes(e.id)) {
              checkedMenuList.push(e.id)
            }
            if (e && e.children) {
              e.children.forEach(b => {
                if (!checkedMenuList.includes(b.id)) {
                  checkedMenuList.push(b.id)
                }
              })
            }
          })
        }
        if (item && item.parentId && item.menuType !== '0') {
          if (this.checkedMenuList.indexOf(item.parentId) === -1) {
            this.checkedMenuList.push(item.parentId)
          }
        }
        this.checkedMenuList = Array.from(new Set(checkedMenuList))
      } else {
        for (const i in this.checkedMenuList) {
          if (this.checkedMenuList[i] === id) {
            this.checkedMenuList.splice(i, 1)
          }
        }
        if (item && item.children) {
          this.cancelPermission(item.children)
          // item.children.forEach(e => {
          //   for (const i in this.checkedMenuList) {
          //     if (this.checkedMenuList[i] === e.id) {
          //       this.checkedMenuList.splice(i, 1)
          //     }
          //   }
          //   // if (!checkedMenuList.includes(e.id)) {
          //   //   checkedMenuList.push(e.id)
          //   // }
          //   // debugger
          //   if (e && e.children) {

          //     e.children.forEach(b => {
          //       for (const i in this.checkedMenuList) {
          //         if (this.checkedMenuList[i] === b.id) {
          //           this.checkedMenuList.splice(i, 1)
          //         }
          //       }
          //     })
          //   }
          // })
        }
      }
    },
    cancelPermission(list) {
      list.forEach(item => {
        for (const i in this.checkedMenuList) {
          if (this.checkedMenuList[i] === item.id) {
            this.checkedMenuList.splice(i, 1)
          }
        }
        if (item && item.children) {
          this.cancelPermission(item.children)
        }
      })
    },
    // 提交分配权限
    submit() {
      const { checkedMenuList: menuIds, activeRoleId: roleId, activeTab: workType } = this
      roleBindPost({ param: { menuIds, roleId, workType }}).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success('提交成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 500)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.permission-table {
  border-top: 1px solid #dfe2e8;
  border-left: 1px solid #dfe2e8;
  font-size: 14px;
  color: #606266;
  margin-bottom: 40px;
  .thead {
    background-color: #e8ebf7;
    font-weight: bold;
    text-align: center;
    .tr:hover {
      background-color: #e8ebf7;
    }
    .second-menu {
      min-width: 200px;
    }
    .options {
      flex: 1;
    }
  }
  .tr {
    display: flex;
    &:hover {
      background-color: #f5f7fa;
    }
    .td {
      line-height: 40px;
      padding: 0 10px;
      border-bottom: 1px solid #dfe2e8;
      border-right: 1px solid #dfe2e8;
    }
    .first-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 200px;
    }
    .second-menu-options {
      flex: 1;
      .item {
        display: flex;
      }
      .name {
        line-height: 40px;
        min-height: 40px;
        padding: 0 10px;
        border-bottom: 1px solid #dfe2e8;
        margin: 0 -10px 0;
        &:last-child {
          border-bottom: none;
        }
      }
      .second-menu {
        min-width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .options {
        flex: 1;
        .checkbox {
          width: 200px;
        }
      }
    }
  }
}
</style>
